<template>

	<view class="container">
		
		<searchVue :flag="swiperFlag" :data="swiperCheck"></searchVue>

		<!-- <scroll-view scroll-y="true" refresher-enabled="true" @refresherpulling='newPage' @scroll="scrollChange"> -->
		<!-- 轮播图占行 -->
		<view class="swiperVue">
			<view class="swiper_box">
				<IndexSwiper :flag="swiperFlag" :images="images" :data="images" @current="getCheckSwiper"></IndexSwiper>
			</view>
		</view>
		
		<!-- menu菜单横向滚动 -->
		<view class="body_banner">
			<!-- #ifndef MP-WEIXIN -->
			<!-- #endif -->
			
			<scroll-view scroll-x="true" android:scrollbarStyle="insideOverlay" @scroll="handleScroll">
				<!-- #ifdef MP-WEIXIN -->
				<view class="uni-scroll-view-content">
				<!-- #endif -->
					<view class="banner_box" v-for="(v,i) in bannerList" :key="i">
						<menuItem :data="v"></menuItem>
					</view>
				<!-- #ifdef MP-WEIXIN -->
				</view>
				<!-- #endif -->
			</scroll-view>
			<!-- 滚动条 -->
			<view class="custom-scroll-container">
				<view class="custom-scroll">
					<view class="scroll" :style="`transform:translateX(${translateXValue}px)`" />
				</view>
			</view>
		</view>
		<view class="contents">
			<!-- 广告图 -->
			<view class="adver_box">
				<view class="adverPostion"></view>
				<swiper class="adverBox" :autoplay="true" :interval="2000" :duration="1000">
					<swiper-item v-for="(v,i) in advertList" :key="i">
						<image :src="base_static+v.img" lazy-load="true" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="advertisement">
				<image src="@/static/advertisement.png" lazy-load="true" model="widthFix" />
			</view>
			<!-- companyType列表 -->
			<view class="menu_list">
				<view :class="checkMenu==v.fid?'checkMenu':''" @click="changeMenu(v.fid)" v-for="(v,i) in menus"
					:key="i">
					{{v.fname}}
				</view>
			</view>

			<!-- 没有商品 -->
			<view class="not_shop" v-if="shops.length==0">
				当前暂无数据
			</view>
			<template v-else>
				<!-- 首页商品 -->
				<view class="show_list">
					<view class="show_box" v-for="(v,i) in shops" :key="i" @click="toDetails(v.id)">
						<goodsItem :data="v"></goodsItem>
					</view>
				</view>

			</template>
			<view class="not_shop" v-show="bottomShow">
				已经到底了
			</view>
			<view style="height: 200rpx;"></view>
		</view>
		<!-- 底部banner -->
		<TabBar></TabBar>
		<!-- 返回顶部 -->
		<toTop v-show="swiperFlag"></toTop>

		<!-- </scroll-view> -->

	</view>

</template>

<script setup>
	import {
		ref,
		reactive,
		defineProps,
		watch,
		defineEmits,
		onMounted,
		getCurrentInstance,
		computed
	} from 'vue'
	import {
		onShow,
		onPageScroll,
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	// 接口调用
	import {
		getSwiper,
		getMenu,
		getGood,
		getAdver
	} from "@/api/index.js"
	// 轮播图组件
	import IndexSwiper from '../../components/IndexSwiper.vue';
	// banner组件
	import menuItem from '../../components/menuItem.vue';
	// 头部组件
	import searchVue from '../../components/search.vue';
	// 商品组件
	import goodsItem from '../../components/goodsItem.vue';
	// 底部tabbar
	import TabBar from '../../components/tabbar.vue';
	// 返回顶部
	import toTop from '../../components/toTop.vue';
	// 同时发起多个请求
	import {
		qsAll
	} from "@/utils/qsAll.js"
	// 
	import {
		useUserStore
	} from "@/stores/user.js"
	import {
		useCache
	} from '@/hooks/useCache';
	const Cache = useCache()
	import * as S from "@/utils/storage.js"
	const userStore = useUserStore()
	// userStore.userInfo.name = "李四"
	// console.log(userStore.userInfo, 127)
	// 活动距离
	const translateXValue = ref(0);
	const itemWidth = ref(0);
	// 计算滚动距离
	function handleScroll(event) {
		// console.log(event)
		// 获取scroll-view滚动的距离
		const scrollLeft = event.detail.scrollLeft;
		// 获取scroll-view内容的总宽度
		const scrollWidth = event.detail.scrollWidth;
		// scroll-view的视口宽度
		const viewWidth = 375;
		const maxTranslateX = 30 - 15;
		// 计算滚动条的移动比例，将内容滚动的比例映射到滑块的移动范围内
		const moveRatio = maxTranslateX / (scrollWidth - viewWidth);
		translateXValue.value = Math.min(scrollLeft * moveRatio, maxTranslateX);
	}
	const test = ()=>{
		// console.log(156)
	}
	const swiperList = ref([])
	const top = ref(0)
	const containStyle = reactive({
		'padding-top': 0
	})
	const scrollTop = ref(0)
	const bannerList = reactive([{
			image: "/static/logo.png",
			title: "景区",
			path: "/pagesD/customer/customer"
		},
		{
			image: "/static/logo.png",
			title: "住宿",
			path: "/pagesD/customer/customer"
		},
		{
			image: "/static/logo.png",
			title: "特惠酒店",
			path: "/pagesD/customer/customer"
		},
		{
			image:"/static/logo.png",
			title: "商品",
			path: "/pagesD/customer/customer"
		},
		{
			image: "/static/logo.png",
			title: "线路",
			path: "/pagesD/customer/customer"
		},
		{
			image: "/static/logo.png",
			title: "场馆",
			path: "/pagesD/customer/customer"
		},
		{
			image: "/static/logo.png",
			title: "攻略",
			path: "/pagesD/customer/customer"
		},
		{
			image: "/static/logo.png",
			title: "社保",
			path: "/pagesD/customer/customer"
		},
		{
			image: "/static/logo.png",
			title: "VR",
			path: "/pagesD/customer/customer"
		},
		{
			image: "/static/logo.png",
			title: "视频",
			path: "/pagesD/customer/customer"
		},
		{
			image: "/static/logo.png",
			title: "视频",
			path: "/pagesD/customer/customer"
		},
		{
			image: "/static/logo.png",
			title: "视频",
			path: "/pagesD/customer/customer"
		}
	])
	const headerShow = ref(false)
	const swiperStyle = reactive({})
	// 判断是否已经滑动来决定是否模糊
	const swiperFlag = ref(false)
	// 轮播到的轮播图
	const swiperCheck = ref({})
	// 选项卡列表
	const menus = ref([])
	// 已经选中的选项卡
	const checkMenu = ref(0)
	// 当前页面 pageIndex
	const pageIndex = ref(1)
	// 每页显示条数 pageSize
	const pageSize = ref(10)
	//总页数
	const allPage = ref(0)
	// 商品列表
	const shops = ref([])
	// 已经到底了是否展示
	const bottomShow = ref(false)
	const images = ref([])
	// 引入节流
	import {
		throttle
	} from "@/utils/throttle.js"


	onLoad(() => {
	})

	onShow(() => {
		getResAll()

	})
	
	// 获取广告数据
	const advertList = ref([])
	const adverImg = ref('')
	const getResAll = async () => {
		// 读取本地存储 看是否存在
		let e = S.getItem("indexResAll")
		if (!e) {
			// 轮播图 菜单  广告
			e = await qsAll([getSwiper(), getMenu(), getAdver()])
			// S.setItem("indexResAll", e, 0.125)
		}
		console.log(e[0].value,273)
		// 赋值轮播
		images.value = e[0].value.data
		// 赋值选项卡
		menus.value = e[1].value.data
		checkMenu.value = e[1].value.data[0].fid
		advertList.value = e[2].value.data
		getGoodList(checkMenu.value)

	}
	// 滑动事件
	onPageScroll((e) => {
		// scrollTop 滚动条距顶部的距离
		if (e.scrollTop > 1) {
			// 开始模糊处理
			swiperFlag.value = true
		} else {
			// 取消模糊
			swiperFlag.value = false
		}
	})
	// 触底事件
	onReachBottom((e) => {
		// 判断数据是否到底
		if (allPage.value > pageIndex.value * pageSize.value) {
			pageIndex.value = pageIndex.value + 1
			// 节流
			throttle(getGoodList(checkMenu.value), 2000)

		} else if (allPage.value != 0 && shops.length != 0) {
			bottomShow.value = true
		}

	})


	const getGoodList =async (fid) => {
		uni.showLoading({
			title: '加载中'
		})
		// 缓存逻辑有问题 暂时关闭缓存
		let res = await getGood({
			fid: fid,
			pageIndex: pageIndex.value
		})
		// let res =await Cache.get(()=>getGood({
		// 	fid: fid,
		// 	pageIndex: pageIndex.value
		// }), "Goods" + pageIndex.value,0.125)
		shops.value = shops.value.concat(res.data.list)
		allPage.value = res.data.count
		uni.hideLoading()
	}




	const getCheckSwiper = ((res) => {
		swiperCheck.value = res
	})

	const changeMenu = ((fid) => {
		console.log(fid,331)
		// 选中状态的 
		checkMenu.value = fid
		// 当前页码
		pageIndex.value = 1
		// 总的数据条数 
		allPage.value = 0
		// 商品列表
		shops.value = []
		// 触底状态
		bottomShow.value = false
		getGoodList(fid)
	})

	// 去详情页面
	const toDetails = ((id) => {
		uni.navigateTo({
			url: `/pagesB/detail/detail?id=${id}`
		})
	})
</script>

<style lang="less" scoped>
	.container {
		box-sizing: border-box;
		// overflow: hidden;
		background: #e9fcff;

		// overflow-y: auto;
		.swiperVue {
			width: 100%;
			height: 300px;

			.swiper_box {
				width: 100%;
				height: 300px;
				position: fixed;
				top: 0;
				z-index: 0;
			}
		}

		.check_search {
			background: linear-gradient(rgba(0, 170, 255, 0.8), hsla(0, 0%, 100%, 0));
		}

		.header_swiper {
			width: 100%;
			height: 300px;
			// position: relative;
			// background: #fff;
			// z-index: -1;
		}

		.body_banner {
			width: 100%;
			position: relative;
			top: -30rpx;
			right: 0;
			z-index: 3;
			padding: 0;
			margin: 0;
			padding: 20rpx 0;
			// overflow: hidden;
			box-sizing: border-box;
			background: #fff;
			border-radius: 30rpx;


			scroll-view {
				width: 100%;
				// background: pink;
				overflow-x: auto;

				/deep/.uni-scroll-view-content {
					width: 130%;
					display: flex;
					flex-wrap: wrap;
				}
				// 设置了 滚动条的样式
				/deep/.uni-scroll-view-content ::-webkit-scrollbar-track {
					background-color: darkgrey;
					display: block;
					scrollbar-color: #6969dd #e0e0e0;
					width: thin;
					box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				}

				.banner_box {
					width: 16%;
					margin: 14rpx 0;
				}
			}




		}

		.contents {
			background-color: #e9fcff;
			z-index: 2;
			position: relative;
		}

		.adver_box {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx;
			padding-top: 0;


			.adverPostion {
				position: absolute;
				top: -50rpx;
				width: 100%;
				height: 50rpx;
				left: 0;

				background-color: #e9fcff;
			}

			.adverBox {
				width: 100%;
				height: 300rpx;
				// border: 1rpx solid gray;
				border-radius: 40rpx;
				background: #fff;
				overflow: hidden;

				swiper-item,
				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.advertisement {
			// height: 1000rpx;

			image {
				width: 100%;
			}
		}

		.menu_list {
			width: 100%;
			height: 110rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			view {
				position: relative;
				border-bottom: 6rpx solid rgba(0, 0, 0, 0);
			}

			.checkMenu {
				font-weight: 600;
				border-bottom: 6rpx solid pink;
			}

		}

		.not_shop {
			text-align: center;
		}

		.show_list {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			justify-content: space-between;

			.show_box {
				width: 48%;
				margin-bottom: 20rpx;
			}
		}



	}

	// 滚动条样式
	.custom-scroll-container {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 24rpx;

		.custom-scroll {
			width: 60rpx;
			overflow: hidden;
			height: 10rpx;
			background: #daeef0;
			border-radius: 4px 4px 4px 4px;
			position: relative;

			.scroll {
				width: 30rpx;
				height: 10rpx;
				background: #00afcc;
				border-radius: 4px 4px 4px 4px;
				/* 初始位置 */
				transform: translateX(0rpx);
			}
		}
	}
</style>